<template>
  <div>
    <div class="header">
      <!-- Navigator Mini Bar -->
      <wxc-minibar :title="language.title"
                    background-color="#fcfcfc">
        <div slot="left">
          <i class="iconfont icon-back"></i>
        </div>
      </wxc-minibar>
    </div>
    <div class="content">
      <!-- History Order -->
      <div class="history-orders">
        <div class="order-box" @click="jumpToPage('/history-orders')">
          <div class="slot-left">
            <i class="iconfont icon-history-order"></i>
            <text>{{language.historyOrderTitle}}</text>
          </div>
          <div class="slot-right">
            <i class="iconfont icon-back arrow-right"></i>
          </div>
        </div>
      </div>
      <!-- Coupon -->
      <div class="coupons">
        <div class="coupon-box" @click="sliderCouponBox()">
          <div class="slot-left">
            <i class="iconfont icon-coupon"></i>
            <text>{{language.couponTitle}}</text>
          </div>
          <div class="slot-right">
            <text class="num">{{coupons.length}}{{language.couponUnit}}</text>
            <i class="iconfont icon-back" :class="[this.couponBoxStatus ? 'arrow-top' : 'arrow-right']" @click="sliderCouponBox()"></i>
          </div>
        </div>
        <div class="list-box" :class="[this.couponBoxStatus ? 'open' : 'close']">
          <div class="slider-box">
            <div class="item-box" v-for="(coupon,index) in coupons" :key="index">
              <div class="item">
                <div class="item-top" :class="[coupon.sliderStatus ? 'open' : 'close']">
                  <div class="slot-left">
                    <image :src="coupon.assets.icon" resize="contain"></image>
                  </div>
                  <div class="slot-right">
                    <div class="title">
                      <text>{{coupon.assets.label}}</text>
                    </div>
                    <div class="date">
                      <text>{{language.endDate}}{{coupon.end_date}}</text>
                    </div>
                    <div class="code">
                      <text>{{language.code}}{{coupon.code}}</text>
                    </div>
                    <div class="btn-switch" @click="sliderQRCode(index)">
                      <text v-if="coupon.sliderStatus">{{language.pack}}</text>
                      <text v-else>{{language.open}}</text>
                      <i class="iconfont icon-back" :class="[coupon.sliderStatus ? 'arrow-top': 'arrow-bottom']"></i>
                    </div>
                    <div class="cancel" @click="applied(index)">
                      <text>{{language.cancel}}</text>
                    </div>
                  </div>
                </div>
                <div class="item-bottom" :class="[coupon.sliderStatus ? 'open' : 'close']">
                  <div class="slot-left"></div>
                  <div class="slot-right"></div>
                  <div class="coupon-image">
                    <image class="image" :src="coupon.assets.image" resize="contain"></image>
                  </div>
                  <div class="details" v-if="coupon.sliderStatus">
                    12356468797987812356468797987812356468797987812356468797987812356468797987835646879798783564687979878
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <wxc-mask height="500"
              width="500"
              mask-bg-color="#FFFFFF"
              :has-animation="true"
              :has-overlay="show"
              :show="show"
              @wxcMaskSetHidden="wxcMaskSetHidden">
         <image :src="couponsimage" style="width:100%;height:100%;"/>
         <div class="closes btn-close iconfont icon-close" @click="shut()"></div>
         <div class="codes">卷码：{{codes}}</div>
    </wxc-mask>
  </div>
</template>

<style lang="scss" scoped>
    .closes{
      color:#FFF;
      font-size:60px;
      text-align: center;
      top:-115%;
    }
    .codes{
      height:80px;
      width:300px;
      border:1px solid rgba(255,255,255,1);
      border-radius:20px;
      text-align: center;
      line-height: 80px;
      color: rgba(255,255,255,1);
      font-size:20px;
      margin-left:20%;
    }
  .content {
    padding: 30px;
    .history-orders {
      background-color: #ffffff;
      box-shadow: 1px 1px 0.06667rem rgba(204,204,204, 0.5);
      border-radius: 20px;

      .order-box {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 30px;
        height: 120px;

        .slot-left {
          flex-direction: row;
          align-items: center;

          .icon-history-order {
            margin-right: 20px;
            font-size: 120%;
          }
        }

        .slot-right {
          .icon-back {
            font-size: 80%;

            &.arrow-right {
              transform: rotate(180deg);
            }
          }
        }
      }
    }
    .coupons {
      background-color: #ffffff;
      margin-top: 30px;
      box-shadow: 1px 1px 0.06667rem rgba(204,204,204, 0.5);
      border-radius: 20px;
      overflow: hidden;

      .coupon-box {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 30px;
        height: 120px;

        .slot-left {
          flex-direction: row;
          align-items: center;

          .icon-coupon {
            margin-right: 20px;
            font-size: 120%;
          }
        }

        .slot-right {
          flex-direction: row;
          align-items: center;

          .num {
            margin-right: 20px;
          }

          .icon-back {
            font-size: 80%;

            &.arrow-top {
              transform: rotate(90deg);
            }

            &.arrow-right {
              transform: rotate(180deg);
            }
          }
        }
      }
      .list-box {
        overflow: scroll;
        transition: .6s all;

        &.close {
          border-top: 1px dashed transparent;
          padding: 0;
          max-height: 0;
        }

        &.open {
          border-top: 1px dashed #dfdfdf;
          max-height: 900px;
        }
        .slider-box {
          padding: 30px;
          .item-box {
            overflow: hidden;
            margin-top: 40px;

            &:first-child {
              margin-top: 0;
            }

            .item {
              border: 4px solid #f45551;
              border-radius: 15px;

              .item-top {
                flex-direction: row;
                max-height: 170px;

                &.open {
                  border-bottom: 1px solid #f45551;
                  transition: .6s all;
                }

                &.close {
                  border-bottom: 1px solid transparent;
                  transition: .6s all;
                }

                .slot-left {
                  width: 150px;
                  border-right: 1px dashed #f45551;
                  position: relative;
                  padding: 10px;

                  &::before {
                    content: "";
                    width: 50px;
                    height: 50px;
                    border: 4px solid #f45551;
                    transform: rotate(45deg);
                    background: #ffffff;
                    position: absolute;
                    top: -36px;
                    right: -26px;
                    border-radius: 50%;
                    z-index: 99;
                  }

                  figure {
                    height: 100%;
                  }
                }

                .slot-right {
                  padding: 20px 30px;
                  flex: 1;
                  position: relative;

                  .title {
                    overflow: hidden;

                    & > p {
                      font-weight: bold;
                      font-size: 28px;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      display: block;
                    }
                  }

                  .date {
                    margin-top: 10px;
                    font-weight: bold;
                    overflow: hidden;
                    flex: 1;

                    & > p {
                      font-size: 12px;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      display: block;
                      color: #757575;
                      font-size: 20px;
                    }
                  }

                  .code {
                    font-weight: bold;
                    overflow: hidden;
                    flex: 1;

                    & > p {
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      display: block;
                      color: #757575;
                      font-size: 20px;
                    }
                  }
                  .cancel{
                    position: absolute;
                    background-color: #f45551;
                    flex-direction: row;
                    border-radius: 50px;
                    padding: 5px 20px;
                    align-items: center;
                    right: 10px;
                    bottom: 10px;
                    z-index: 99;
                    .weex-text {
                      color: #ffffff;
                      font-size: 25px;
                    }
                  }
                  .btn-switch {
                    position: absolute;
                    background-color: #f45551;
                    flex-direction: row;
                    border-radius: 50px;
                    padding: 5px 20px;
                    align-items: center;
                    right: 120px;
                    bottom: 10px;
                    z-index: 99;

                    .weex-text {
                      color: #ffffff;
                      margin-right: 10px;
                      font-size: 25px;
                    }

                    .icon-back {
                      color: #ffffff;
                      font-size: 25px;
                      text-align: center;

                      &.arrow-top {
                        transform: rotate(90deg);
                      }

                      &.arrow-bottom {
                        transform: rotate(-90deg);
                      }
                    }
                  }
                }
              }

              .item-bottom {
                flex-direction: row;
                transition: height .6s;
                position: relative;

                &.open {
                  height: 500px;
                }

                &.close {
                  height: 36px;
                  margin-top: -36px;

                  .coupon-image {
                    height: 0;

                    .image {
                      height: 0;
                    }
                  }
                }
                .details{
                  padding:15px;
                  position: absolute;
                  left: 0;
                  top: 70%;
                  right: 0;
                  height: 30%;
                  word-wrap:break-word;
                  font-size:20px;
                  color:#ccc;
                }
                .slot-left {
                  padding: 20px;
                  width: 150px;
                  position: relative;

                  &::before {
                    content: "";
                    width: 50px;
                    height: 50px;
                    border: 4px solid #f45551;
                    transform: rotate(45deg);
                    background: #ffffff;
                    position: absolute;
                    bottom: -35px;
                    right: -26px;
                    border-radius: 50%;
                  }
                }

                .coupon-image {
                  position: absolute;
                  left: 0;
                  top: 0;
                  right: 0;
                  height: 70%;
                  padding: 15px;

                  .image {
                    height: 100%;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>

<script>
import Vue from 'vue'
import { getCouponList } from '@/api/coupon'
import { i18n } from '@/renderer/modules/lang'
import { WxcMinibar , WxcMask } from 'weex-ui'
export default {
  components: { WxcMinibar , WxcMask},
  data: () => ({
    couponBoxStatus: false,
    coupons: [],
    language: {
      title: i18n.t('mine.title'),
      historyOrderTitle: i18n.t('mine.historyOrderTitle'),
      couponTitle: i18n.t('mine.couponTitle'),
      couponUnit: i18n.t('mine.couponUnit'),
      endDate: i18n.t('mine.endDate'),
      code: i18n.t('mine.code'),
      open: i18n.t('mine.open'),
      pack: i18n.t('mine.pack'),
      cancel: i18n.t('mine.cancel')
    },
    show: false,
    couponsimage:'',
    codes:'',
  }),
  created () {
    this.getCoupon()
  },
  methods: {
    getCoupon () {
      getCouponList({
        lang_id:localStorage.getItem('language') ? localStorage.getItem('language') : 1
      }).then(res => {
        this.coupons = res.data
      }).catch(err => {
        console.log(err.message)
      }).finally(() => {})
    },
    sliderCouponBox () {
      this.couponBoxStatus = !this.couponBoxStatus
    },
    sliderQRCode (index) {
      let coupon = this.coupons[index]
      if (!coupon.sliderStatus) coupon.sliderStatus = false
      coupon.sliderStatus = !coupon.sliderStatus
      Vue.set(this.coupons, index, coupon)
    },
    jumpToPage (src) {
      this.$router.push(src)
    },
    applied (itme){
      this.couponsimage = this.coupons[itme].assets.qr.url;
      this.codes = this.coupons[itme].code;
      this.show = true;
    },
    shut (){
      this.show = false;
    },
    wxcMaskSetHidden(){
      this.show = false;
    }
  }
}
</script>
